import type { NextPage } from 'next'
import Head from 'next/head'
import Image from 'next/image'
import styles from '../styles/Home.module.less'
import { Button } from 'antd';

import { inject, observer } from 'mobx-react'
import React from 'react';
import { StoreType } from '../store'

export interface Props {
  store: StoreType
}

@inject('store')
@observer
export default class Home extends React.Component<Props> {
  readonly props!: Readonly<Props> & Readonly<Props>;

  render() {
    const { store } = this.props;
    return (
      <div className={styles.container}>
        <Head>
          <title>Create Next App</title>
          <meta name="description" content="Generated by create next app" />
          <link rel="icon" href="/favicon.ico" />
        </Head>

        <main className={styles.main}>
          <h1 className={styles.title}>
            Welcome to <a href="https://nextjs.org">Next.js!</a>
          </h1>

          <div className={styles.description}>
            <p>sore数据:{store.count}</p>
            <p><Button type="primary" onClick={() => store.addCount()}>新增</Button></p>
            <p><Button type="primary" onClick={() => store.reduceCount()}>减少</Button></p>

          </div>
        </main>
      </div>
    )
  }

}

// export default Home
function constructor() {
  throw new Error('Function not implemented.');
}

